<template>
    <div v-show="showChat">
        <UserList :list="list" v-show="state == 1" @change="onUserChange" />
        <ChatWindow ref="chatWindowRef" v-show="state == 2" :list="list" v-model:receiveId="receiveId" @close="state = 1" />
    </div>

    <div class="comment-button" @click="showComment">
        <img :src="_oss_ + 'images/icon-comment.svg'" />

        <div class="dot" v-show="userStore.messageLog.dialogueCount">{{
            userStore.messageLog.dialogueCount > 99 ? '99+' :
            userStore.messageLog.dialogueCount }}</div>
    </div>

    <div class="comment-bubble" v-show="!isCloseCommentBubble && showChat">
        在作品广场关注好友后，可私聊好友

        <el-icon color="#fff" size="18" @click="onClose">
            <CircleClose />
        </el-icon>
    </div>
</template>
<script setup>
import { GetFirendList } from "~/api";
import { CircleClose } from "@element-plus/icons-vue";
import UserList from "./components/UserList/P.vue";
import ChatWindow from "./components/ChatWindow/P.vue";
const userStore = useUserStore();

const list = ref([]);
const receiveId = ref(null);
const showChat = ref(false);
const state = ref(1);
const chatWindowRef = ref(null);
const isCloseCommentBubble = ref(localStorage.getItem('is-close-comment-bubble'));

const showComment = () => {
    showChat.value = !showChat.value;

    if (showChat.value) {
        GetUserFirendList();
    } else {
        chatWindowRef.value.close();
    }
}

watch(() => state.value, () => {
    if (state.value == 1) {
        GetUserFirendList();
    }
})

watch(() => userStore.messageLog.dialogueCount, (newVal, oldVal) => {
    if (newVal != oldVal && state.value == 1) {
        GetUserFirendList();
    }
})

const onUserChange = (id) => {
    state.value = 2;
    receiveId.value = id;
}

const GetUserFirendList = async () => {
    const res = await GetFirendList();
    if (res.code == 200) {
        list.value = res.data;
    }
}

const onClose = () => {
    isCloseCommentBubble.value = 1;
    localStorage.setItem('is-close-comment-bubble', 1)
}
</script>
<style lang="scss" scoped>
.comment-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    background-color: rgba(0, 0, 0, .5);
    backdrop-filter: blur(20px);
    border-radius: 50%;
    z-index: 999;

    .dot {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 0;
        width: 18px;
        height: 18px;
        font-size: 10px;
        background-color: #ff0000;
        color: #fff;
        border-radius: 50%;
    }

    img {
        width: 30px;
        height: 30px;
    }
}

.comment-bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 80px;
    bottom: 20px;
    height: 50px;
    padding: 0 20px;
    background-color: rgba(0, 0, 0, .5);
    backdrop-filter: blur(20px);
    border-radius: 50px;
    color: #fff;
    z-index: 999;
    line-height: 1;
    user-select: none;

    :deep(.el-icon) {
        margin-left: 8px;
        cursor: pointer;
    }
}
</style>